<template>
	<view ref="tmspin" :class="[customClass]" :style="[customCSSStyle]" class="flex relative flex-col">
		<view class="relative zIndex-1">
			<slot></slot>
		</view>
		<view
			v-if="loadingComputed"
			@click.stop="clickMask"
			class="absolute zIndex-10 flex-center blur"
			:class="[css_is_nvue ? '' : ' fulled-height   ']"
			:style="[
				css_is_nvue ? '' : { width: '100%' },
				{ backgroundColor: bgColorComputed },
				css_is_nvue
					? {
							width: (css_nvue_size[0] || props.fontSize) + 'px',
							height: (css_nvue_size[1] || props.fontSize) + 'px'
					  }
					: ''
			]"
		>
			<view :userInteractionEnabled="false" class="pa-10 flex-col flex-col-center-center">
				<tm-icon
					spin
					:fontSize="props.size"
					:dark="isDark"
					:color="_color"
					:followDark="followDark"
					:followTheme="props.followTheme"
					:name="props.icon"
				></tm-icon>
				<tm-text
					:followTheme="props.followTheme"
					:dark="isDark"
					:followDark="followDark"
					:color="_color"
					_class="mt-16"
					:label="props.tip"
				></tm-text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
/**
 * 局部加载
 * @description 放置在其里面的所有内容，加载状态时，会在其中所有内容上添加遮罩模糊加载页面，并且不可操作。
 */

import tmText from '../tm-text/tm-text.vue'
import tmIcon from '../tm-icon/tm-icon.vue'

import { getCurrentInstance, computed, ref, provide, inject, onMounted, onUnmounted, onUpdated, nextTick, watch } from 'vue'
import { cssstyle, tmVuetify } from '../../tool/lib/interface'
import { custom_props, computedTheme, computedClass, computedStyle, computedDark } from '../../tool/lib/minxs'

import { useTmpiniaStore } from '../../tool/lib/tmpinia'
const store = useTmpiniaStore()

// #ifdef APP-PLUS-NVUE
const dom = uni.requireNativePlugin('dom')
// #endif
// 混淆props共有参数
const props = defineProps({
	...custom_props,
	followTheme: {
		type: [Boolean, String],
		default: true
	},
	color: {
		type: String,
		default: 'primary'
	},
	icon: {
		type: String,
		default: 'tmicon-shuaxin'
	},
	size: {
		type: Number,
		default: 46
	},
	bgColor: {
		type: String,
		default: 'rgba(255,255,255,0.9)'
	},
	tip: {
		type: [String],
		defalut: ''
	},
	load: {
		type: [Boolean, String],
		default: false
	}
})
const emits = defineEmits(['click'])
const proxy = getCurrentInstance()?.proxy ?? null
// 设置响应式全局组件库配置表。
const tmcfg = computed<tmVuetify>(() => store.tmStore)
//自定义样式：
const customCSSStyle = computed(() => computedStyle(props))
//自定类
const customClass = computed(() => computedClass(props))
//是否暗黑模式。
const isDark = computed(() => computedDark(props, tmcfg.value))
//计算主题
// const tmcomputed = computed<cssstyle>(() => computedTheme(props, isDark.value));
// 点击文字事件。
function clickhandle(e: Event): void {
	emits('click', e)
}
const css_is_nvue = ref(true)
// #ifndef APP-NVUE
css_is_nvue.value = false
// #endif
const css_nvue_size = ref([0, 0])
const bgColorComputed = computed(() => (isDark.value ? 'rgba(0,0,0,0.9)' : props.bgColor))
const loadingComputed = computed(() => props.load)
const _color = computed(() => props.color)
onUpdated(() => {
	// #ifdef APP-PLUS-NVUE
	nvuegetClientRect()
	// #endif
})
onMounted(() => {
	// #ifdef APP-PLUS-NVUE
	nvuegetClientRect()
	// #endif
})
function nvuegetClientRect() {
	// #ifdef APP-PLUS-NVUE
	nextTick(function () {
		dom.getComponentRect(proxy.$refs.tmspin, function (res) {
			if (res?.size) {
				css_nvue_size.value = [res.size.width, res.size.height]
				if (res.size.height == 0) {
					nvuegetClientRect()
				}
			}
		})
	})
	// #endif
}
function clickMask(e) {
	// #ifdef APP-PLUS-NVUE
	e.stopPropagation()
	// #endif
	emits('click', e)
}
</script>

<style></style>
